<template>
    <div>
      <!--面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/progress' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>快递分类</el-breadcrumb-item>
        <el-breadcrumb-item>快递详情</el-breadcrumb-item>
      </el-breadcrumb>
      <!---->
      <el-timeline>
        <el-timeline-item  v-for="(item,index) in ProgressList" :key="index"
                           :timestamp="item.timestamp" placement="top">
          <el-card>
            <h4>{{item.goodName}}</h4>
            <p>{{item.userInfo}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Proress",
        data(){
          return{
            ProgressList:[],
          }
        },
        mounted() {
          this.getProgressList()
        },
      methods:{
          // 获取快递信息
         async getProgressList(){
           const res=await axios.get('http://localhost:3000/kuaidi')
           if (res.data.meta.status===200){
             this.ProgressList=res.data.data
           }
          }
      }
    }
</script>

<style scoped>
.el-timeline{
  padding: 20px;
}
</style>
